<template>
	<view class="detail">
		<view class="title">{{detail.title}}
        </view>
		<view class="info">
			<view class="author">阅读 780</view>
			<view class="time">发布日期：{{detail.createTime.split(' ')[0]}}</view>
		</view>
		<view class="reader">
			<view class="hd">
			<li><img src="../../static/iconfont/grade11.png" alt=""><text class="xm">张三</text></li>
			<li><img src="../../static/iconfont/grade11.png" alt=""><text class="xm">张三</text></li>
			<li><img src="../../static/iconfont/grade11.png" alt=""><text class="xm">张三</text></li>
			<li><img src="../../static/iconfont/grade11.png" alt=""><text class="xm">张三</text></li>
			<li><img src="../../static/iconfont/grade11.png" alt=""><text class="xm">张三</text></li>
			</view>
			<view class="bt">
				<text>缘分就在--瞬间</text>
				<text class="lx">
					联系客服牵线
				</text>
			</view>
		</view>
		
		<view class="content">
			<view class="title">简介
			</view>
			{{detail.content}}
		</view>
		<video class="video" :src="detail.videoUrl"></video>
		<view class="description">
			声明：本站进行了内容采集不代表本站及作者观点，若有侵犯请及时联系管理员，谢谢您的支持。
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options:null,
				id:'',
				schoolList:[],
				detail:{}
			};
		},
		created() {
			this.detail = this.$store.state.studyInfo;
			console.log(this.detail);
		},
	}
</script>

<style lang="scss">
.detail{
	padding:30rpx;
	.title{
		font-size: 46rpx;
		color:#333;
	}
	.reader{
		width: 98%;
		height: 125px;
		// float: left;
		margin: 0 auto;
		// background-color: pink;
		// background-image: ;
		border:1px solid pink;
		border-radius: 10px;
		
	}
	 .hd{
		 padding-top: 5px;
		 height: 75%;
	 }
	.reader li{
		width: 19%;
		height: 75%;
		
		// border-right: 1px solid #F89898;
		// background-color:blue;
		padding-left: 2.5px;
		// margin-right: 5px;
		list-style: none; 
		// dispaly:block; /* 将ul的行内元素转换为块元素 */
		float:left; 
		
	}
	.reader li img{
		width: 90%;
		height: 90%;
		border-radius: 50%;


	}
	.xm{
		margin-left: 12px;
	}
	.bt{
		width: 100%;
		background-color: #FDF1F5;
		height: 23%;
		border-radius: 10px;
		// padding-top
		
	}
	.bt{
		text{
			// float: left;
			margin-top: 10rpx;
			margin-left: 20rpx;
			color: rgb(238, 84, 146);
			// padding-top: 2px;
			// margin-top: 3px;
		}
	}
	.lx{
		float: right;
		margin-right: 20rpx;
		margin-top: 10rpx;
		height: 20px;
		width: 28%;
		padding-left: 5px;
		background-color: white;
		border:1px solid pink;
		color: rgb(238, 84, 146);
        border-radius: 18px;
		// justify-content: right;
	
	}
	
	.info{
		background: #F6F6F6;
		padding:20rpx;
		font-size: 25rpx;
		color:#666;
		display: flex;
		justify-content: space-between;
		margin:40rpx 0;
	}
	.content{
		padding-bottom:50rpx;		
	}
	.content .title{
		margin-top: 20rpx;
		margin-left: 40%;
		margin-bottom: 20px;
	}
	.description{
		margin-top: 20rpx;
		background: #FEF0F0;
		font-size: 26rpx;
		padding:20rpx;
		color:#F89898;
		line-height: 1.8em;
	}
}
</style>
